<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="app">
    <!-- <component :is="url"></component>
    <a href="#foo">foo</a>
    <a href="#bar">bar</a> -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const Foo = { template: '<div>foo</div>' };
    const Bar = { template: '<div>bar</div>' };
    const NotFound = { template: '<div>not found!</div>' };

    const routeTable = {
      foo: Foo,
      bar: Bar
    };

    window.addEventListener('hashchange', () => {
      app.url = window.location.hash.slice(1);
    });

    const app = new Vue({
      el: '#app',
      data: {
        url: window.location.hash.slice(1)
      },
      render(h) {
        return h('div', [
          h(routeTable[this.url] || NotFound),
          h('a', { attrs: { href: '#foo' } }, 'foo'),
          ' ',
          h('a', { attrs: { href: '#bar' } }, 'bar'),
        ]);
      }
    });
  </script>
</body>
</html>
